// 立项
<template>
  <div class="box">
    <el-card>
      <el-form class="searchForm" :inline="true" :model="queryForm" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="queryForm.title" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-select v-model="queryForm.perl" placeholder="请选择来源"> </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="级别">
              <el-select v-model="queryForm.dept" placeholder="请选择级别"> </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="queryForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 250px; background-color: transparent"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="pageChange(1)">查询</el-button>
              <el-button type="primary" @click="onAdd">添加</el-button>
              <el-button type="primary" @click="onFile">导入</el-button>
              <!-- <input type="file" ref="fileRef" style="display: none"></input> -->
              <!-- <el-input type="file" ref="fileRef" style="display: none"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        height="380"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column fixed="left" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="onDel(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" width="80" label="序号" align="center"> </el-table-column>
        <el-table-column prop="title" label="项目名称" min-width="250">
          <template slot-scope="scope">
            <el-link type="success" @click="onlink(scope.row)">{{ scope.row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="dept" label="级别" min-width="150" align="center"> </el-table-column>
        <el-table-column prop="perl" label="来源" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="date1" label="创建时间" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="name" label="创建人" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="content" label="状态" min-width="120" align="center"> </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px"
        :current-page="queryForm.pagenum"
        :page-sizes="[20, 50, 100]"
        :page-size="queryForm.pagesize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </el-card>

    <el-dialog title="督办项目创建" :visible.sync="Visible">
      <el-form :model="form">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="来源" :label-width="formLabelWidth">
          <el-select v-model="form.perl" placeholder="请选择来源"> </el-select>
        </el-form-item>
        <el-form-item label="级别" :label-width="formLabelWidth">
          <el-select v-model="form.dept" placeholder="请选择级别"> </el-select>
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">保存</el-button>
        <el-button type="primary" @click="Visible = false">创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { QueryPageList, Save, Del } from '@/api/settings/bibie'
export default {
  name: 'ProjectEstablishment',
  data() {
    return {
      file: '',
      queryForm: {
        pagenum: 1,
        pagesize: 20,
        time: '',
        title: '',
        perl: '',
        dept: ''
      },
      total: 0,
      tableData: [
        {
          title: '关于25年度XXXXXX',
          dept: '集团级',
          perl: '其他',
          date1: '2025-04-28',
          name: '张XX',
          content: ''
        }
      ],
      loading: true,
      Visible: false,
      formRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        curr: [{ required: true, message: '请输入币别', trigger: 'blur' }],
        rate: [{ type: 'number', message: '折人民币汇率必须为数字值' }],
        rate1: [{ type: 'number', message: '折美汇率必须为数字值' }]
      },
      form: {},
      formLabelWidth: '120px'
    }
  },
  created() {
    this.onSearch()
  },

  methods: {
    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      console.log(page)
      this.queryForm.pagenum = page
      this.onSearch()
    },
    // 查询数据
    async onSearch() {
      this.loading = true
      // const { content } = await QueryPageList(this.queryForm)
      // console.log(content)
      // this.tableData = content.list
      // this.total = content.total
      this.loading = false
    },
    onClickName(data) {
      this.form = data
    },

    onAdd() {
      this.Visible = true
    },
    // 点击附件上传
    onFile() {
      // console.log(this.$refs.fileRef.$el.innerHTML)
      // this.$refs.fileRef.click()
      this.$router.push('/Three/ProjectEstablishment/ImportDetails')
    },

    onClose() {
      this.form = {}
    },
    onDel(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // const del = await Del({ id: data.id })
          // console.log(del)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // await Save(this.form)
          if (this.form.id) {
            this.$message({
              type: 'success',
              message: '修改数据成功'
            })
          } else {
            this.$message({
              type: 'success',
              message: '添加数据成功'
            })
          }
          this.visible = false
          this.onSearch()
        } else {
          return false
        }
      })
    },
    // 点击项目名称链接
    onlink(row) {
      console.log(row)
      this.$router.push('/Three/ImportDetailsC')
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> .el-select {
  width: 100%;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}
.title {
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}

.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
</style>
